<template>
  <div>
    <p class="top">
      <el-tooltip content="播放">
        <el-button @click="speak" type="success" :icon="VideoPlay" circle />
      </el-tooltip>
      <el-tooltip content="暂停">
        <el-button @click="pause" type="success" :icon="VideoPause" circle />
      </el-tooltip>
      <el-tooltip content="继续">
        <el-button @click="continues" type="success" :icon="DArrowRight" circle />
      </el-tooltip>
      <el-tooltip content="关闭">
        <el-button @click="close" type="success" :icon="CircleClose" circle />
      </el-tooltip>
    </p>
    <div class="html" v-html="htmlContent"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  VideoPlay,
  DArrowRight,
  VideoPause,
  CircleClose,
} from '@element-plus/icons-vue'
const synth = window.speechSynthesis;
const voice = new SpeechSynthesisUtterance();
/**
*  text – 要合成的文字内容，字符串
* lang – 使用的语言，字符串， 例如：“zh-cn”
* voiceURI – 指定希望使用的声音和服务，字符串
* volume – 声音的音量，区间范围是0到1，默认是1
* rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
* pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
*/
voice.lang = 'zh-CN';
voice.volume = 1;
voice.rate = 0.7;
voice.pitch = 0.6;
// voice.voiceURI = 'Google 普通话（中国大陆）';
const htmlContent = ref<string>('');

htmlContent.value =
  '<p>我是一个标题</p><p>我是内容,除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子，当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦</p>';

const speak = () => {
  console.log(synth.getVoices());
  
  synth.cancel()
  voice.text = htmlContent.value;
  synth.speak(voice);
}
const pause = () => {
  synth.pause();
}
const continues = () => {
  synth.resume()
}
const close = () => {
  synth.cancel()
}
</script>

<style lang="scss" scoped>
.top{
  width: 1000px;
  height: 40px;
  margin: 50px auto;
  text-align: center;
}
.html{
  width: 1000px;
  height: 500px;
  border: 1px solid #eee;
  margin: 50px auto;
  text-align: center;
}
</style>
